<template>
  <main>
    <Hero :title = "title"/>
    <div class="service-area section-padding30">
      <div class="container">
        <div class="row justify-content-center">
          <div class="col-xl-6 col-lg-7 col-md-10 col-sm-10">
            <!-- Section Tittle -->
            <div class="section-tittle text-center mb-80">
              <h2>知识技能</h2>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-lg-4 col-md-6 col-sm-6">
            <div class="single-cat text-center mb-50">
              <div class="cat-icon">
                <span class="flaticon-null-1"></span>
              </div>
              <div class="cat-cap">
                <h5><a>前端技能</a></h5>
                <p>前端门外汉，写写简单页面，会自己修改点Vue、CSS、JS代码罢了</p>
              </div>
            </div>
          </div>
          <div class="col-lg-4 col-md-6 col-sm-6">
            <div class="single-cat active text-center mb-50">
              <div class="cat-icon">
                <span class="flaticon-think"></span>
              </div>
              <div class="cat-cap">
                <h5><a>后端技能</a></h5>
                <p>后端能入门吧，Java代码，Spring整套框架的使用还是说得过去的</p>
              </div>
            </div>
          </div>
          <div class="col-lg-4 col-md-6 col-sm-6">
            <div class="single-cat text-center mb-50">
              <div class="cat-icon">
                <span class="flaticon-gear"></span>
              </div>
              <div class="cat-cap">
                <h5><a>其他技能</a></h5>
                <p>在实习期间对LINUX操作系统，Dockers、K8S还是可以上手的</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="testimonial-area testimonial-padding">
      <div class="container">
        <div class="row d-flex justify-content-center">
          <div class="col-xl-8 col-lg-8 col-md-10">
            <div class="h1-testimonial-active dot-style">
              <div class="single-testimonial text-center">
                <div class="testimonial-caption ">
                  <div class="testimonial-founder">
                    <div class="founder-img mb-40">
                      <img src="http://q.qlogo.cn/headimg_dl?dst_uin=3228314370&spec=160&img_type=jpg" alt="">
                      <span>苏半夏</span>
                      <p style="cursor: pointer"></p>
                    </div>
                  </div>
                  <div class="testimonial-top-cap">
                    <p style="cursor: pointer">创立个人博客网站的目的的话，只是检验下自己的学习成果，要说是为了和同学们学习交流的话，我实在是不够格，不过还是希望大家可以喜欢并留下宝贵的意见</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <section id="resume" class="resume">
      <div class="container" data-aos="fade-up">
        <div class="row">
          <div class="col-lg-6">
            <h3 class="resume-title">前端学习</h3>
            <div class="resume-item">
              <h4>JS + JQUERY</h4>
              <h5>2021 - 2022</h5>
              <p><em>我认为最重要的前端知识</em></p>
              <p>其实在之前学习HTML的时候，也学习过一定的js知识，不过都是些极其简单不入流的内容。之后系统性的学习了js，又学习jQuery，这种知识是相对来说特别重要的，jQuery选择器在参与后台渲染方面特别重要，也是学习的非常认真，做项目的时候使用了很多次</p>
            </div>
            <div class="resume-item">
              <h4>HTML + CSS</h4>
              <h5>2020 - 2021</h5>
              <p><em>感觉不是很重要的内容</em></p>
              <p>感觉HTML和CSS对于我这样的后台人员来说并不是特别重要的内容，当然了，就是让我写，以我的审美能力写出的东西肯定也是缺点美感的，无法和那些前端大佬相比，而且前后端分离的大环境肯定也不需要我去写前端的内容，我只需要看懂会改即可，快乐摆烂(doge)</p>
            </div>
          </div>
          <div class="col-lg-6">
            <h3 class="resume-title">后端学习</h3>
            <div class="resume-item">
              <h4>SpringBoot + VUE</h4>
              <h5>2022 - 现在</h5>
              <p><em>很重要的新技术，还在学习</em></p>
              <p>没什么好说的重要，也是比较新的技术，学习后端必不可少的技术，还在学习，有了这几次SSM项目的经验，应该可以按时掌握</p>
            </div>
            <div class="resume-item">
              <h4>Spring + SpringMVC + MyBatis</h4>
              <h5>2021 - 2022</h5>
              <p><em>最基本的技术，学了最久时间，也是这个博客的框架</em></p>
              <p>这个框架学得最久吧，虽然不如SpringBoot那样更加简洁方便，但我觉得也是挺重要，也是学的时间比较认真比较久的，也花了很多时间在项目上，算是对于之前的一些总结也算是对于之后SpringBoot学习的一个铺垫，如今也算是顺利毕业，虽然博客实现功能比较普遍，但是也算一分耕耘一分收获吧</p>
            </div>
            <div class="resume-item">
              <h4>JavaEE + B/S</h4>
              <h5>2020 - 2021</h5>
              <p><em>最敷衍的学习，一年的开摆时光</em></p>
              <p>这个没啥好说的了其实，当时学的也比较敷衍，当时学习的第一感觉就是麻烦，没有SSM那么方便简洁，学起来就非常枯燥，在自己学完做了一个项目之后就抓紧进入SSM框架的学习了</p>
            </div>
          </div>
        </div>
      </div>
    </section><!-- End Resume Section -->

    <section class="home-blog-area section-padding30">
      <div class="container">
        <!-- Section Tittle -->
        <div class="row justify-content-center">
          <div class="col-xl-5 col-lg-6 col-md-9 col-sm-10">
            <div class="section-tittle text-center mb-90">
              <h2>社交主页</h2>
            </div>
          </div>
        </div>
        <div class="row">
          <div style="margin: auto" class="col-xl-8 col-lg-8 col-md-8">
            <div class="home-blog-single mb-30">
              <div class="blog-img-cap">
                <div class="blog-img">
                  <img src="../assets/img/medicine/index_jieqi.png" alt="">
                </div>
                <div class="blog-cap">
                  <h3><a style="cursor: pointer" href="https://gitee.com/dxxr">苏半夏</a></h3>
                  <p>我本山中一老翁，爱闲无事亦从容，晓来风雨催春去，荣辱何须更问逢。</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </main>
</template>
<script>
import Hero from "../components/hero"
export default {
  name: "about",
  components: {
    Hero
  },
  data() {
    return {
      title: "个人介绍",
      solar: [],
      day: ''
    }
  },
  created() {
    this.getSolar()
    this.getDateTime()
  },
  methods : {
    getDateTime() {
      let date = new Date();
      let month = date.getMonth() + 1;
      let curDate = date.getDate();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (curDate >= 0 && curDate <= 9) {
        curDate = "0" + curDate;
      }
      this.day = month + '-' + curDate
    },
  }
}
</script>
<style scoped>
a:hover {
  text-decoration-line: none;
  cursor: pointer
}

.resume .resume-title {
  font-size: 26px;
  font-weight: 700;
  margin-top: 20px;
  margin-bottom: 20px;
  color: #45505b;
}

.resume .resume-item {
  padding: 0 0 20px 20px;
  margin-top: -2px;
  border-left: 2px solid #09cc7f;
  position: relative;
}

.resume .resume-item h4 {
  line-height: 18px;
  font-size: 18px;
  font-weight: 600;
  text-transform: uppercase;
  font-family: "Poppins", sans-serif;
  color: #09cc7f;
  margin-bottom: 10px;
}

.resume .resume-item h5 {
  font-size: 16px;
  background: #f7f8f9;
  padding: 5px 15px;
  display: inline-block;
  font-weight: 600;
  margin-bottom: 10px;
}

.resume .resume-item ul {
  padding-left: 20px;
}

.resume .resume-item ul li {
  padding-bottom: 10px;
}

.resume .resume-item:last-child {
  padding-bottom: 0;
}

.resume .resume-item::before {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50px;
  left: -9px;
  top: 0;
  background: #fff;
  border: 2px solid #09cc7f;
}
</style>
